<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html">
    <meta charset="UTF-8">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#2932e1">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                //   alert(document.getElementById('divids').style.left);
                if (document.getElementById('divids').style.left == '0px') {
                    // alert("to_0px");
                    $("div#divids").animate({ left: '250px' });
                } else {
                    // alert("to_250px");
                    $("div#divids").animate({ left: '0px' });
                }
            });
        });

        function person(firstname, lastname, age, eyecolor) {
            this.firstnameg = firstname;
            this.lastname = lastname;
            this.age = age;
            this.eyecolor = eyecolor;

            this.changeName = changeName;
            function changeName(name) {
                this.lastname = name;
            }
        }

        myMother = new person("Steve", "Jobs", 56, "green");
        myMother.changeName("Ballmer");
        document.write(myMother.lastname);
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div id="divid" style="background:#98bf21;height:100px;width:100px;position:absolute;left:0px">

    </div>
    <div id="divids" style="background:#98bf21;height:100px;width:100px;position:relative;left:0px;top:120px"></div>
</body>

</html>